<template>
<div class="new-list">
    <common-banner></common-banner>
    <div class="contain">
        <ul class="new-list-ul">
            <a v-for="item in newPageData" @click="handleToNews(item.id)"> 
                <li>
                    <p class="new-title">{{item.title}}</p>
                    <p class="new-tip">{{item.contant}}</p>
                    <span class="new-time">{{item.time}}</span>
                </li>
            </a>
        </ul>
        <div class="new-list-page">
            <Page :total="newLength"  size="small" :current="page" :page-size="dataSize" @on-change="handlePageChange"/>
        </div>
    </div>
</div>  
</template>

<script>
import CommonBanner from "@/views/common/Banner";
import ApiPath from "@/api/ApiPath";

export default {
  name: 'NewList',
  components: {
    CommonBanner
  },
  data () {
    return {
        newListData: "", //数据列表
        newLength: 0, //一共几条数据
        page: parseInt(sessionStorage['newListPage']) || 1,   //当前页数内容 
        dataSize: 5
    }
  },
  created() {
        this.$store.state.isNavShow = true;
  },
  beforeRouteEnter(to, from, next) {
    next(vm => {
         vm.$emit("setNav", to.meta.index);
    });
  },
  methods:{
    handleToNews(id){
            this.$router.push({path:'/new',query:{ id:id }})
    },
    getNewListInfo(){
        this.$axios.get(ApiPath.getNewList)
        .then(this.getNewListInfoSucc);
    },
    getNewListInfoSucc(res){
        res = res.data;
        if(res){
            this.newListData = res.newList;
        }
        // console.log("[NewList] NewListInfo:" + JSON.stringify(res))
    },
    handlePageChange(num){
        this.page = num;
        sessionStorage['newListPage'] = num;
        console.log("[NewList] handlePageChange:" + JSON.stringify(num));
    }
  },
  mounted(){
        this.getNewListInfo();
  },
  computed: {
        newPageData: function(){
            var lang = this.$i18n.locale;
            var arr = this.newListData[lang];
            this.newLength = arr && arr.length;
            var data = arr && arr.slice(this.dataSize * (this.page - 1), Math.min(this.dataSize * this.page), this.newListData.length);
            return data;
        }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped="" type="text/css">
.new-list-ul{
    margin-top: 1rem;
    li{
        height: 80px;
        margin-bottom: .5rem;
        color: $fColor;
        border-bottom: 1px dashed #dcdcdc;
        font-size: 18px;
        p{
            width: 75%;
            float: left;
        }
        .new-tip{
            color: $iColor;
            font-size: 14px;
        }
        .new-time{
            float: right
        }
        &:hover .new-title{
            color: $bColor
        }
    }
}
.new-list-page{
    text-align: center;
    margin-bottom: 1rem
}
</style>
